<template>
  <el-dialog
    :title="view === 'create'? '员工新增': '员工信息编辑'"
    :visible="true"
    custom-class="dialogWrapper"
    :before-close="closeDialog"
    >
    <el-form :model="formData" label-width="80px" ref="ruleForm" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model.trim="formData.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model.trim="formData.phone" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="工号" prop="staffNo">
        <el-input v-model.trim="formData.staffNo" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="证件类型" prop="idType" required>
        <el-select v-model.trim="formData.idType">
          <el-option v-for="(item,index) in ['身份证']" :value="'0'+String(index+1)" :label="item" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证" prop="idNo">
        <el-input v-model.trim="formData.idNo" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex" required>
        <el-select v-model.trim="formData.sex">
          <el-option v-for="(item,index) in ['女','男']" :value="String(index)" :label="item" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model.trim="formData.email" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="staffStatus" required>
        <el-select v-model.trim="formData.staffStatus">
          <el-option v-for="(item,index) in ['在职']" :value="'0'+String(index+1)" :label="item" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工等级" prop="staffLevel" required>
        <el-select v-model.trim="formData.staffLevel">
          <el-option v-for="(item,index) in ['普通员工']" :value="'0'+String(index+1)" :label="item" :key="index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="info" @click="submit('ruleForm')" :disabled="Subabled">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createStaff, editStaff,queryStaffInfo } from "@/services/staffManager";
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
var vailMobile = (rule, value, callback) => {
	var MobileRegex = /^1[34578]\d{9}$/;
	if (!MobileRegex.test(value)) {
	    callback(new Error('员工手机号格式不正确！(仅支持手机号)'))
	    } else {
	        callback();
	    }
};
var vailIdcard = (rule, value, callback) => {
	var idCardRegex = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
	if (!idCardRegex.test(value)) {
	    callback(new Error('员工身份证号格式不正确！'))
	    } else {
	        callback();
	    }
};
var vailEmail = (rule, value, callback) => {
	var emailRegex = /^[0-9A-Za-z][\.-_0-9A-Za-z]*@[0-9A-Za-z]+(\.[0-9A-Za-z]+)+$/;
	if (!emailRegex.test(value)) {
	    callback(new Error('员工邮箱格式不正确！'))
	    } else {
	        callback();
	    }
};
export default {
  name: "edit-role",
  data () {
    return {
      menus: [],
      list: [],
      userId:"",
      Subabled:false,
      formData: {
        id:"",
        serialNo:"",
        companyNo: "",
        name: "",
        staffNo: "",
        phone: "",
        email:"",
        sex:"",
        idNo: "",
        idType:"",
        staffStatus:"",
        staffLevel: ""
      },
      formFilter:{
        serialNo:"",
        companyNo:""
      },
      dialogFormVisible: false,
      rules: {
        name: [{ required: true, message: "请输入员工姓名", trigger: "blur" },
        { min: 1, max: 12, message: '长度在 12个字符以内', trigger: 'blur' }],
        staffNo: [{ required: true, message: "请输入员工工号", trigger: "blur" },
        { min: 1, max: 50, message: '长度在 50个字符以内', trigger: 'blur' }],
        idNo: [{ required: true, message: "请输入员工身份证号", trigger: "blur" },
        { validator: vailIdcard, trigger: 'blur'},
        { min: 1, max: 50, message: '长度在 50个字符以内', trigger: 'blur' }],
        phone: [
    			{ required: true, message: '请输入员工手机号', trigger: 'blur' },
   			  { validator: vailMobile, trigger: 'blur'}
        ], 
        email: [
    			{ required: true, message: '请输入邮箱', trigger: 'blur' },
   			  { validator: vailEmail, trigger: 'blur'}
        ], 
        idType: [{ required: true, message: "请选择身份类型", trigger: "blur" }],
        sex: [{ required: true, message: "请选择员工性别", trigger: "blur" }],
        staffStatus: [{ required: true, message: "请选择员工状态", trigger: "blur" }],
        staffLevel: [{ required: true, message: "请选择员工等级", trigger: "blur" }],
       }
    }
  },
  props: {
    view: {
      type: String,
      default: "create"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    async loadData () {
      this.loading = true
      try {
        let data = await queryStaffInfo(Object.assign(this.formFilter))
        // debugger
        this.formData = data.data
      } catch (e) {
        if (e instanceof RequestError) {
          this.$alert(e.message, '提示', {
            type: 'error',
            confirmButtonText: '确定'
          })
        } else {
          throw e
        }
      }
      this.loading = false
    },
    submit(formName) {
      this.Subabled = true;
      this.butTimeOut();
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            if (this.view === "create") {
              await createStaff({
                companyNo: this.formData.companyNo,
                name: this.formData.name,
                staffNo: this.formData.staffNo,
                phone: this.formData.phone,
                email: this.formData.email,
                sex:this.formData.sex,
                idNo: this.formData.idNo,
                idType: this.formData.idType,
                staffStatus: this.formData.staffStatus,
                staffLevel:this.formData.staffLevel
              });
            } else {
              await editStaff({
                id:this.formData.id,
                serialNo:this.formData.serialNo,
                companyNo: this.formData.companyNo,
                name: this.formData.name,
                staffNo: this.formData.staffNo,
                phone: this.formData.phone,
                email: this.formData.email,
                sex:this.formData.sex,
                idNo: this.formData.idNo,
                idType: this.formData.idType,
                staffStatus: this.formData.staffStatus,
                staffLevel:this.formData.staffLevel
              });
            }
            this.dialogFormVisible = false;
            this.$emit("close", true);
            this.$message({
              showClose: true,
              message: "提交成功",
              type: "success"
            });
          } catch (e) {
            if (e instanceof RequestError) {
              this.$alert(e.message, "提示", {
                type: "error",
                confirmButtonText: "确定"
              });
            } else {
              throw e;
            }
          }
        } else {
          return;
        }
      });
    },
    butTimeOut(){
      var serf = this;
      setTimeout(function(){
        serf.Subabled = false;
      },1200)
    }
  },
  mounted() {}
};
</script>
<style scoped>
.dialogWrapper {
  width: 540px;
}
.el-select {
  width: 100%;
}
.el-textarea__inner{
	height: 100px;
	resize:none;
}
</style>
